<template>
  <div>
    <!-- 任何内容都可以插槽的形式插入到任何一个组件中 -->
    <card>
      <span>后盾人</span>
      <input type="text" value="后盾人">
      <hd-button />
    </card>

    <hr>
    
    <!-- 插槽写在哪个组件当中，它能使用的数据和方法就是这个组件的，跟插槽最终被放置的那个组件没有关系 -->
    <!-- <card @click="show"> -->
    <card :content="content">
      后盾人
    </card>

    <hr>

    <!-- 插槽的默认内容，有内容的时候显示内容，没有内容的时候显示默认内容 -->
    <hd-button>保存</hd-button>
    <hd-button></hd-button>

    <hr>

    <div class="title">具名插槽</div>
    <named-slot>
      <template v-slot:header>标题</template>
      <!-- v-slot:可以简写为# -->
      <template #main>内容内容内容</template>
      <div>底部</div>
    </named-slot>

    <hr>

    <div class="title">将插槽的内容传给使用它的组件</div>
    <!-- 默认插槽接收数据可以直接写在组件上，不用template,但不可以包含有其他插槽 -->
    <!-- <lesson v-for="lesson of lessons" :key="lesson.id" :lesson="lesson" #default="{id}">
      <button @click="del(id)">删除</button>
    </lesson> -->

    <!-- 多个插槽必须使用template -->
    <lesson v-for="lesson of lessons" :key="lesson.id" :lesson="lesson" >
      <!-- slotProps接收子组件传过来的所有参数，{id}接收子组件传过来的id -->
      <!-- <template #default="slotProps">{{slotProps}} -->
      <template #icon>:)</template>
      <template #default="{id}">
        <button @click="del(id)">删除</button>
      </template>
    </lesson>
  </div>
</template>

<script>
  import lessons from '../data/db.js'
  import Card from './components/Card.vue'
  import HdButton from './components/Button.vue'
  import NamedSlot from './components/NamedSlot.vue'
  import Lesson from './components/Lesson.vue'
  export default {
    components:{Card,HdButton,NamedSlot,Lesson},
    data() {
      return{
        content:"父组件的数据",
        lessons
      }
    },
    methods:{
      show(content){
        console.log(content);
      },
      del(id){
        const idx = this.lessons.findIndex(i => i.id == id);
        this.lessons.splice(idx,1);
      }
    }
  }
</script>

<style lang="scss" scoped>
.title{
  font-weight: bold;
}
</style>
